<script setup lang="ts">
import type { IconType } from '@/components/PngIcon.vue'

interface Laber {
  label: string
  id?: string
  icon?: IconType
  handleFunc?: () => void
  children?: Laber[]
}

const showChangeSpeed = ref(false)

const topBar = ref<Laber[]>([
  {
    label: '剪辑',
    icon: 'clip_2',
    children: [
      {
        icon: 'split',
        label: '分割',
      },
      {
        label: '变速',
        icon: 'variableSpeed',
        children: [
          {
            label: '常规变速',
            icon: 'variableSpeedCommon',
          },
          {
            label: '曲线变速',
            icon: 'variableSpeedCurve',
            handleFunc: setChangeSpeed,
          },
        ],
      },
      {
        label: '动画',
        icon: 'animation',
      },
      {
        label: '抖音玩法',
        icon: 'gameplay',
      },
      {
        label: '删除',
        icon: 'delete',
      },
    ],
  },
  {
    label: '音频',
    icon: 'sound',
  },
  {
    label: '文字',
    icon: 'text',
  },
  {
    label: '贴纸',
    icon: 'paster',
  },
  {
    label: '画中画',
    icon: 'PIP',
  },
  {
    label: '特效',
    icon: 'effect',
  },
])

const level = ref(0)

const secendBar = ref<Laber[]>([])
const tertiaryBar = ref<Laber[]>([])

function handleSecendEntry(item: Laber) {
  if (item.children) {
    secendBar.value = item.children
    level.value++
  }
}

function handleTertiaryEntry(item: Laber) {
  if (item.children) {
    tertiaryBar.value = item.children
    level.value++
  }
}

function handleBackSecend() {
  level.value--
}

function handleBackTop() {
  level.value--
}

/**
 * @description: level是需要传入的层级序号，如handleManualEntry(0, 1) 则打开剪辑 -> 变速
 * @param {array} level
 * @return {*}
 */
function handleManualEntry(..._level: number[]) {
  level.value = 0

  if (_level.length === 0) return
  // _level 最多只有2层
  let data: any = null

  if (_level.length >= 1) {
    data = topBar.value[_level[0]]
    handleSecendEntry(data)
  }

  if (_level.length === 2) {
    data = data.children[_level[1]]
    handleTertiaryEntry(data)
  }
}

function setChangeSpeed() {
  showChangeSpeed.value = true
}

defineExpose({
  handleManualEntry,
  setChangeSpeed,
  // handleSelectType: changeSpeedRef.value.handleSelectType,
})
</script>

<template>
  <div class="w-full bg-#0A0A0A b-#333333 border-t-1 h-5em fixed bottom-0">
    <div v-if="level === 0" class="flex items-center h-full overflow-x-auto scrollbar-none">
      <div
        v-for="item in topBar" :key="item.label" class="flex-col-center flex-1 min-w-13%"
        @click="handleSecendEntry(item)"
      >
        <png-icon :icon="item.icon" class="text-2em m-b-3px" />
        <div class="text-sm">
          {{ item.label }}
        </div>
      </div>
    </div>

    <div v-show="level === 1" class="flex h-full items-center bg-#1C1C1C">
      <div class="bg-#333 h-70% rounded flex-center m-x-0.5em" @click="handleBackTop">
        <i class="i-icon-park-outline-left" />
      </div>

      <div class="flex flex-1 overflow-x-auto scrollbar-none">
        <div
          v-for="item in secendBar" :key="item.label" class="flex-col-center flex-1 min-w-16%"
          @click="handleTertiaryEntry(item)"
        >
          <png-icon :icon="item.icon" class="text-2em m-b-3px" />
          <div class="text-sm">
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>

    <div v-show="level === 2" class="flex h-full items-center bg-#1C1C1C">
      <div class="bg-#333333 h-70% rounded flex-center m-x-0.5em" @click="handleBackSecend">
        <i class="i-icon-park-outline-double-left" />
      </div>

      <div class="flex flex-1 gap-1em overflow-x-auto scrollbar-none">
        <div
          v-for="item in tertiaryBar" :key="item.label" class="flex-col-center flex-1 min-w-15%"
          @click="item.handleFunc"
        >
          <png-icon :icon="item.icon" class="text-2em m-b-3px" />
          <div class="text-sm">
            {{ item.label }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
